import React, { useState } from 'react';
import { Card, Row, Col, Radio, Empty } from 'antd';
import LinkTo from '@/components/LinkTo';
import { get as getPath } from 'object-path';
import moment from 'moment';
import styles from './style.less';
import PostChart from './chart/PostChart';
import DemandChart from './chart/DemandChart';
import ScaleChart from './chart/ScaleChart';
import { fetchProgress } from '../service';

const Progress = props => {
    const { companyId } = props;
    const [data, setData] = React.useState([]);
    const [radioValue, setRadioValue] = useState('not');
    const fetchData = async () => {
        const payload = {
            companyId
        };
        const response = await fetchProgress(payload);
        if (response && response.code === 10000) {
            setData(response.data);
        }
    };
    const renderSubContent = (text1, text2, text3) => (
        <div className={styles.subContent}>
            <div className={styles.text1}>{text1}</div>
            <div className={styles.text2}>{text2}</div>
            <div className={styles.text3}>{text3}</div>
        </div>
    );
    const renderGoal = () => {
        const time = {
            startTime: moment()
                .startOf('week')
                .format('YYYY-MM-DD'),
            endTime: moment()
                .endOf('week')
                .format('YYYY-MM-DD'),
            companyId
        };
        const time2 = {
            beginTime: moment()
                .startOf('week')
                .format('YYYY-MM-DD'),
            endTime: moment()
                .endOf('week')
                .format('YYYY-MM-DD'),
            companyId
        };
        const list = [
            {
                title: '本周新增简历',
                num: getPath(data, 'recruitProgressOrTargetOverview.newResumeNum', 0),
                link: '/office/personnelManagement/recruit/talentPool',
                query: time2
            },
            {
                title: '本周业务筛选',
                num: getPath(data, 'recruitProgressOrTargetOverview.businessScreeningNum', 0),
                link: '/office/personnelManagement/recruit/candidate',
                query: time2
            },
            {
                title: '本周面试安排',
                num: getPath(data, 'recruitProgressOrTargetOverview.interviewArrangeNum', 0),
                link: '/office/personnelManagement/recruit/interview',
                query: time2
            },
            {
                title: '本周offer发放',
                num: getPath(data, 'recruitProgressOrTargetOverview.offerNum', 0),
                link: '/office/personnelManagement/recruit/offer',
                query: time
            }
        ];
        return (
            <div className={styles.renderGoal}>
                {list.map(item => (
                    <div className={styles.list}>
                        <div className={styles.listTitle}>{item.title}</div>
                        <LinkTo className={styles.link} to={item.link} query={item.query}>
                            {item.num}
                        </LinkTo>
                    </div>
                ))}
            </div>
        );
    };
    /**
     * 获取百分比
     * @param {*} num 数
     * @param {*} total 总数
     */
    const toPercent = (num, total) => {
        if (total === 0) {
            return '--';
        }
        return `${Math.round((num / total) * 10000) / 100.0}%`; // 小数点后两位百分比
    };

    const onChange = e => {
        setRadioValue(e.target.value);
    };
    // 获取招聘目标的标题
    const getRecruitmentTitle = () => {
        const year = moment().year();
        const quarter = moment().quarter();
        return `${year}Q${quarter}招聘目标`;
    };
    React.useEffect(() => {
        fetchData();
    }, [companyId]);
    return (
        <Card bordered={false} title="本季度招聘进展">
            <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
                <Col md={8} xs={24} sm={24}>
                    <div className={styles.title}>{getRecruitmentTitle()}</div>
                    {renderSubContent(
                        '已完成',
                        toPercent(
                            getPath(data, 'recruitProgressOrTargetOverview.quarterCompletedRecruiterNum', 0),
                            getPath(data, 'recruitProgressOrTargetOverview.quarterTargetNum', 100)
                        ),
                        `目标${getPath(data, 'recruitProgressOrTargetOverview.quarterTargetNum', 0)}人,已入职${getPath(
                            data,
                            'recruitProgressOrTargetOverview.quarterCompletedRecruiterNum',
                            0
                        )}人`
                    )}
                    <ScaleChart
                        data={data.recruitProgressOrTargetOverview}
                        toPercent={toPercent}
                        companyId={companyId}
                    />
                    {renderGoal()}
                </Col>
                <Col md={8} xs={24} sm={24}>
                    <div className={styles.title}>需求部门</div>
                    {renderSubContent(
                        '招聘需求',
                        getPath(data, 'recruitProgressOrDepartmentOverview.departmentCount', 0),
                        '部门汇总数'
                    )}
                    {getPath(data, 'recruitProgressOrDepartmentOverview.departmentList', []).length > 0 ? (
                        <DemandChart
                            data={data.recruitProgressOrDepartmentOverview.departmentList}
                            companyId={companyId}
                        />
                    ) : (
                        <Empty style={{ height: 100, margin: '100px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    )}
                </Col>
                <Col md={8} xs={24} sm={24}>
                    <div className={styles.addpostStyle}>
                        <div className={styles.title}>招聘职位</div>
                        <Radio.Group onChange={onChange} defaultValue={radioValue} size="small">
                            <Radio.Button value="not">未完成</Radio.Button>
                            <Radio.Button value="all">全部</Radio.Button>
                        </Radio.Group>
                    </div>
                    {renderSubContent(
                        '招聘职位',
                        getPath(data, 'recruitProgressOrPostOverview.totalUncompleteNum', 0),
                        '职位汇总数'
                    )}
                    {getPath(data, 'recruitProgressOrPostOverview.postList', []).length > 0 ? (
                        <PostChart
                            data={data.recruitProgressOrPostOverview}
                            radioValue={radioValue}
                            companyId={companyId}
                        />
                    ) : (
                        <Empty style={{ height: 100, margin: '100px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    )}
                </Col>
            </Row>
        </Card>
    );
};

export default Progress;
